<template>
	<view class="contenter">
		<view v-if="owners.length>0">
			<view class="block__title">成员信息</view>
			<view v-for="(item,index) in owners" :key="index"
				class="content bg-white margin-bottom margin-right-xs radius margin-left-xs padding">

				<view class="flex padding-bottom-xs solid-bottom justify-between">
					<view>
						<view>
							<img src="" alt="">
						</view>
						<view class="">
							{{item.name}}
						</view>
					</view>
					<view class="text-gray" v-if="item.homeMemberType == 1">业主</view>
					<view class="text-gray" v-if="item.homeMemberType == 2">业主成员</view>
					<view class="text-gray" v-if="item.homeMemberType == 3">租户</view>
					<view class="text-gray" v-if="item.homeMemberType == 4">租户成员</view>
				</view>
				<view class="flex margin-top justify-between">
					<view class="text-gray">成员编号</view>
					<view class="text-gray">{{item.memberId}}</view>
				</view>
				<view class="flex margin-top-xs justify-between">
					<view class="text-gray">身份证号</view>
					<view class="text-gray">{{item.idCard}}</view>
				</view>

				<view class="flex margin-top-xs justify-between">
					<view class="text-gray">成员年龄</view>
					<view class="text-gray">{{item.age}}岁</view>
				</view>
				<view class="flex margin-top-xs justify-between">
					<view class="text-gray">成员性别</view>
					<view class="text-gray">{{item.sex == 0? '男': '女'}}</view>
				</view>

				<view class="solid-top flex justify-end margin-top padding-top-sm padding-bottom-sm"
					v-if="item.memberId == ownerId">

				</view>
				<view class="solid-top flex justify-end margin-top padding-top-sm padding-bottom-sm" v-else>
					<button class="cu-btn round-btn bg-red " @click="_deleteOwnerMember(item)">移除</button>
				</view>

			</view>



		</view>
		<view v-else>
			<no-data-page></no-data-page>
		</view>

		<view v-if="ownerMemberType == 1 || ownerMemberType == 3" class="bg-white  border flex justify-end"
			style="display:flex;justify-content: space-evenly;position: fixed;width: 100%;bottom: 0;">
			<view class="btn-group" style="width: 300rpx;height: 80rpx;">
				<button class="cu-btn bg-cyan shadow-blur " @click="family_home">审核家庭成员</button>
			</view>
			<view class="btn-group" style="width: 300rpx; height: 80rpx;">
				<button class="cu-btn bg-green shadow-blur " style="width: 100%;"
					@click="goAdd(ownerMemberType)">添加成员</button>
			</view>
		</view>
		<view v-else>

		</view>

		<view class="cu-modal" :class="delOwnerMemberFlag==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="_cancleCall()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您确认删除该成员？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action margin-0 flex-sub  solid-left" @tap="_cancleDeleteOwnerMember()">取消</view>
					<view class="action margin-0 flex-sub text-green solid-left" @tap="_doDeleteOwnerMember()">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;
	import noDataPage from '@/components/no-data-page/no-data-page.vue';

	import {
		deleteOwnerMember
	} from '../../api/owner/ownerApi.js'
	export default {
		data() {
			return {
				owners: '',
				delOwnerMemberFlag: false,
				page: 1,
				totalPage: 0,
				loading: false,
				communityId: '1111',
				ownerId: '', //业主ID
				ownerMemberId: '', //业主成员ID
				ownerMemberType: '', //业主成员类型
				curOwnerMember: {},
				ownerTypeCd: '1001',
			};
		},
		components: {
			noDataPage
		},
		onLoad(options) {
			let _that = this;

			_that.owners = context.getUserInfo();
			_that.ownerId = _that.owners[0].ownerId
			console.log("业主ID", _that.ownerId)

			_that.ownerMemberId = _that.owners[0].familyList[0].memberId
			console.log("业主成员id", _that.ownerMemberId)

			_that.ownerMemberType = _that.owners[0].familyList[0].homeMemberType
			console.log("业主成员类型", _that.ownerMemberType)

			_that.owners = _that.owners[0].familyList
			console.log("业主成员信息", _that.owners)

		},
		// onLoad(option) {
		// 	this.homeData()
		// 	// wx.request({
		// 	// 	url: "http://localhost:8888/familyList",
		// 	// 	post: "get",
		// 	// 	success: (ok) => {
		// 	// 		console.log(ok)
		// 	// 		this.owners = ok.data
		// 	// 		console.log("this.owners",this.owners, this.owners.length)
		// 	// 	}
		// 	// })
		// 	// context.onLoad(options);
		// },
		onShow: function() {
			// this._initData();

		},
		onPullDownRefresh: function() {
			// 上拉刷新
			if (!this.loading) {
				this.getTable(1, true).then(() => {
					// 处理完成后，终止下拉刷新
					wx.stopPullDownRefresh();
				});
			}
		},
		onReachBottom: function() {
			console.log(1, !this.loading, this.page < this.totalPage); // 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求

			if (!this.loading && this.page < this.totalPage) {
				this.getTable(this.page + 1);
			}
		},
		methods: {
			// homeData(){
			// 	wx.request({
			// 		url: "http://localhost:8888/familyList",
			// 		post: "get",
			// 		success: (ok) => {
			// 			console.log(ok)
			// 			this.owners = ok.data
			// 			// console.log("this.owners",this.owners[0].communityId, this.owners.length)
			// 		}
			// 	})
			// },
			// _initData:function(){
			// 	let that = this;
			// 	that.owners = [];
			// 	// 使用 require.context查询并把符合条件的结果文件名加入到一个键-值对形式的对象 requireComponent中
			// 	context.getOwner(function(_owner) {
			// 		that.communityId = _owner.communityId;
			// 		that.ownerId = _owner.memberId;
			// 		that.ownerTypeCd = _owner.ownerTypeCd;
			// 		that.getTable(1);
			// 	});
			// },
			// getTable: function(page, override) {
			// 	let that = this;
			// 	this.loading = true;
			// 	let _paramIn = {
			// 		"communityId": that.communityId,
			// 		"ownerId": that.ownerId
			// 	};
			// 	context.request({
			// 		url: constant.url.queryOwnerMembers,
			// 		header: context.getHeaders(),
			// 		method: "GET",
			// 		data: _paramIn,
			// 		success: function(res) {
			// 			if (res.statusCode == 200) {
			// 				let _owners = res.data.owners;
			// 				that.owners = _owners;
			// 				that.loading = false;
			// 			}
			// 		},
			// 		fail: function(e) {
			// 			wx.showToast({
			// 				title: "服务器异常了",
			// 				icon: 'none',
			// 				duration: 2000
			// 			})
			// 		}
			// 	})
			// },
			goAdd: function(ownerMemberType) {
				console.log("ownerMemberType", ownerMemberType)
				uni.navigateTo({
					url: '/pages/family/family?ownerMemberType=' + ownerMemberType
				})
				// this.vc.navigateTo({
				// 	url: "/pages/family/family"
				// })
			},
			family_home: function() {
				// uni.navigateTo({
				// 	url: "../family/familyMumber"
				// })
			},
			_cancleCall: function() {
				this.delOwnerMemberFlag = false;
			},
			_deleteOwnerMember: function(item) {
				this.delOwnerMemberFlag = true;
				this.curOwnerMember = item;
			},
			_cancleDeleteOwnerMember: function(item) {
				this.delOwnerMemberFlag = false;
			},
			_doDeleteOwnerMember: function() {
				let that = this;
				console.log("<<<<<<<<<<<<", this.communityId)
				this.curOwnerMember.communityId = this.communityId;
				deleteOwnerMember(this.curOwnerMember)
					.then((res) => {
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
						that._cancleDeleteOwnerMember();
						that._initData();
					}, (err) => {
						uni.showToast({
							icon: 'none',
							title: err
						});
						that._cancleDeleteOwnerMember();
					})
			}
		}
	};
</script>
<style scoped lang="scss">
	.contenter {
		width: 100%;
		height: calc(100vh - 100rpx);
		overflow-y: auto;
	}

	.content {
		margin: 0rpx 30rpx 20rpx 30rpx;
		border-radius: 30rpx;
	}

	.ppf_item {
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.btn-group {
		height: 100%;

		button {
			width: 100%;
			height: 80rpx;
			margin-top: 15rpx;
			border-radius: 40rpx;
		}
	}

	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 100rpx;
	}

	.cu-btn.lgplus {
		padding: 0 20px;
		font-size: 18px;
		height: 100upx;

	}

	.cu-btn.sharp {
		border-radius: 0upx;
	}

	.line-height {
		line-height: 100upx;
	}
</style>
